<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试字段描述</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid mt-4">
        <h2>测试字段描述</h2>
        
        <div class="card mb-4">
            <div class="card-header">
                <h5>测试操作</h5>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-primary" onclick="testFieldDescription()">测试字段描述获取</button>
                <button type="button" class="btn btn-info" onclick="testDetailedChanges()">测试详细变更</button>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h5>测试结果</h5>
            </div>
            <div class="card-body">
                <div id="testResult"></div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 测试字段描述获取
        function testFieldDescription() {
            $.get('/test/fieldDescription/testFieldDescription', function(response) {
                if (response.code === 0) {
                    let html = '<h6>字段描述测试结果</h6>';
                    html += '<table class="table table-bordered table-sm">';
                    for (let key in response.data) {
                        html += '<tr><td>' + key + '</td><td>' + response.data[key] + '</td></tr>';
                    }
                    html += '</table>';
                    $('#testResult').html(html);
                } else {
                    $('#testResult').html('<div class="alert alert-danger">获取失败: ' + response.msg + '</div>');
                }
            }).fail(function(xhr) {
                $('#testResult').html('<div class="alert alert-danger">请求失败: ' + xhr.responseText + '</div>');
            });
        }
        
        // 测试详细变更
        function testDetailedChanges() {
            $.get('/test/fieldDescription/testDetailedChanges', function(response) {
                if (response.code === 0) {
                    let html = '<h6>详细变更测试结果</h6>';
                    if (response.data && response.data.length > 0) {
                        html += '<table class="table table-bordered table-sm">';
                        html += '<thead><tr><th>字段路径</th><th>字段描述</th><th>变更前</th><th>变更后</th></tr></thead><tbody>';
                        response.data.forEach(change => {
                            html += '<tr>';
                            html += '<td>' + (change.fieldName || '') + '</td>';
                            html += '<td>' + (change.fieldDescription || '') + '</td>';
                            html += '<td>' + JSON.stringify(change.oldValue) + '</td>';
                            html += '<td>' + JSON.stringify(change.newValue) + '</td>';
                            html += '</tr>';
                        });
                        html += '</tbody></table>';
                    } else {
                        html += '<div class="alert alert-warning">没有变更信息</div>';
                    }
                    $('#testResult').html(html);
                } else {
                    $('#testResult').html('<div class="alert alert-danger">获取失败: ' + response.msg + '</div>');
                }
            }).fail(function(xhr) {
                $('#testResult').html('<div class="alert alert-danger">请求失败: ' + xhr.responseText + '</div>');
            });
        }
    </script>
</body>
</html>